<template>
  <n-breadcrumb :separator="commonVar.separator">
    <n-breadcrumb-item
      v-for="(item, index) in breadcrumbStore.breadcrumbList"
      :key="index"
      @click="handleClick(item)"
    >
      <n-icon><AddSquareMultiple20Filled /></n-icon> {{ item.label }}
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { AddSquareMultiple20Filled } from "@vicons/fluent";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";
import { useThemeStore } from "@/stores/models/theme";
import router from "@/router";

onMounted(() => {});
const breadcrumbStore = useBreadcrumbStore();
const themeStore = useThemeStore();
const commonVar = themeStore.commonVar;

const handleClick = (item) => {
  router.push({ path: item.key });
};
</script>
<style scoped lang='scss'>
</style>